<template>
  <view>
    <view class="video-box">
      <video class="fullscreen-video" :style="{'height':windowHeight+'px'}"
      :src="thread.threadVideo.mediaUrl" :poster="thread.threadVideo.coverUrl" controls :show-progress="false" codec="hardware"
      :show-fullscreen-btn="false" :show-play-btn="false" :loop="true" autoplay :show-center-play-btn="false">
      </video>
      <view class="video-info">
        <view class="atavar-box">
          <image class="atavar-img" :src="thread.author.avatar" mode="widthFix"></image>
          <image class="follow" @click="follow(thread)" src="https://www.qiyaoshuizu.cn/static/plus.png">
          </image>
        </view>
        <view class="icon-box " @click="toggleFabulous()">
          <image v-if="thread.firstPost.isLiked" src="https://www.qiyaoshuizu.cn/static/hart.png" class="hart"></image>
          <image v-else src="https://www.qiyaoshuizu.cn/static/hart0.png" class="hart"></image>
          <text>{{ thread.firstPost.likeCount}}</text>

        </view>
        <view class="icon-box"  @click="commontAdd(thread.thread.id)">
          <qui-icon name="icon-message"></qui-icon>
          <text>{{thread.thread.postCount}}</text>
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view class="icon-box" @click="shareClick(thread)">
          <qui-icon name="icon-share"></qui-icon>
          <text>{{thread.thread.replyCount}}</text>

        </view>
        <!-- #endif -->

      </view>
      <view class="video-title">
        <view class="user-name">@{{thread.author.username}}</view>
        <view class="video-content">
          {{thread.thread.postContent}}
        </view>
      </view>
      <view class="head" @click="gotoBack">
        <uni-row>
          <uni-col :span="2">
            <qui-icon name="icon-back1" size="38"></qui-icon>
          </uni-col>
          <uni-col :span="22"></uni-col>
        </uni-row>
      </view>
    </view>
  </view>
</template>

<script>
  import user from '@/mixin/user';
  import forums from '@/mixin/forums';
  import detectionModel from '@/mixin/detectionModel';
  import loginModule from '@/mixin/loginModule';
  import newApi from '@/api/new-api';
  // #ifdef H5
  import wxshare from '@/mixin/wxshare-h5';
  // #endif
  export default {
    data() {
      return {
        threadId: 0,
        thread: {},
        // 屏幕高度
        windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,
      }
    },
   mixins: [
     user,
     forums,
     loginModule,
     // #ifdef H5
     wxshare,
     // #endif
     detectionModel,
   ],
    onLoad(e) {
      this.threadId = e.id;
      let params = {
      	include:['user']

      };
      let that = this;
      console.log('params',params)
      this.$store.dispatch('jv/get', [`threads/${this.threadId}`, {
      		params
      	}])
      	.then(res => {
      		console.log(res);
      });
      this.loadThread();
    },
    methods: {
      loadThread() {
        const params = {
          pid: Number(this.threadId)
        }
        newApi.readThreadDetail({
          params
        }).then(result => {
          console.log(result)
          this.thread = result.Data;
        });
      },
      gotoBack() {
        uni.navigateBack({
          delta: 0
        })
      },
      // 点赞切换
      toggleFabulous() {
        this.thread.firstPost.isLiked = !this.thread.firstPost.isLiked;
        if (this.thread.firstPost.isLiked) {
          this.thread.firstPost.likeCount = this.thread.firstPost.likeCount + 1;
        } else {
          this.thread.firstPost.likeCount = this.thread.firstPost.likeCount - 1;
        }

        const jvObj = {
          type: 'posts',
          id: this.thread.firstPost.id,
        };
        let params = {
          _jv: jvObj,
          isLiked: this.thread.firstPost.isLiked,
        };

        this.$store
          .dispatch('jv/patch', params)
          .then(data => {});
      },

      follow(item) {
        let self=this;
        const params = {
          include: ['groups', 'dialog'],
        };
        this.$store
          .dispatch('jv/get', [`users/${this.thread.author.id}`, {
            params
          }])
          .then(res => {
             if (res.follow == 0) {
              const params = {
                _jv: {
                  type: 'follow',
                },
                type: 'user_follow',
                to_user_id: item.author.id,
              };
              self.$store.dispatch('jv/post', params)
                .then(res => {

                });

            } else {
              self.$store.dispatch('jv/delete', `follow/${item.author.id}/1`).then(() => {
                this.thread.fromUser.follow = 0;

              });
            }
          });

      },
      // 分享
      shareClick(item) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5 || APP-PLUS
          this.h5LoginMode();
          // #endif
        }
        // #ifdef APP-PLUS
        uni.shareWithSystem({
        	summary: '分享自七曜水族：' + item.thread.title,
        	href: 'https://www.qiyaoshuizu.cn/h5/topic/index/?id=' + item.thread.pid,
        	success() {
        		// 分享完成，请注意此时不一定是成功分享
        		console.log('share sucess')
        	},
        	fail() {
        		// 分享失败
        		console.log('share error')
        	}
        })
        // #endif

        // #ifdef H5
        this.h5Share({
          title: item.thread.title,
          id: item.thread.firstPostId,
          url: '/mainpage/bbs/video?thread_id=' + this.thread_id,
        });

        // #endif
      },
      // 评论
      // commontAdd(pid) {
      //   this.commontShow = true;
      //   this.loadThread(pid);
      //   this.loadThreadPosts(pid)
      // },
      // 评论
      commontAdd(pid) {
        uni.navigateTo({
          url: `/topic/index?id=${pid}`,
        });
        // this.commontShow = true;
        // this.loadThread(pid);
        // this.loadThreadPosts(pid)
      },

    }
  }
</script>

<style>
  .video-box {
    width: 100vw;
    height: 100vh;
    display: flex;
  }

  .fullscreen-video {
    width: 750rpx;
    position: relative;
  }

  .video-info {
    width: 100rpx;
    position: absolute;
    right: 20rpx;
    bottom: 100rpx;


  }

  .atavar-box {
   /* background-color: white; */
    padding: 6rpx;
    border-radius: 100%;
    height: 80rpx;
    margin-bottom: 100rpx;




  }

  .atavar-img {
    width: 100%;
    display: block;
    border-radius: 100%;
  }

  .icon-box {
    width: 100rpx;
    height: 100rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    color: white;
    color: #ffffff;


  }

  .icon-btn {
    font-size: 60rpx;
  }

  .count-text {
    font-size: 24rpx;
  }

  .video-title {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    left: 20rpx;
    bottom: 100rpx;
    width: 600rpx;
    color: white;


  }

  .user-name {
    font-weight: bold;
    line-height: 30rpx;
  }

  .video-content {
    font-size: 24rpx;
    line-height: 30rpx;
  }

  .head {
    position: absolute;
    left: 0rpx;
    top: 10rpx;
    width: 100%;
    color: white;
  }

  .follow {
    width: 40rpx;
    height: 40rpx;
  }

  .hart {
    width: 40rpx;
    height: 40rpx;
  }

  .message-box {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    text-align: center;
    color: #FFFFFF;
  }

  .message-box text {
    color: #FFFFFF;
    font-size: 16px;
    padding-top: 4px;
  }

  .video-box {
    width: 100vw;
    height: 100vh;
    display: flex;
  }
</style>
